<template>
	<view class="content">
		<button @click="chooseAndPreviewImage">1.选择本地图片并预览</button>
		<image v-if="imageUrl" :src="iamgeUrl" class="preview-img"></image>
		<button @click="getWeather" class="btn-mt">2.获取明天天气预报</button>
		<view class="weather-crad" v-if="weatherData">
			<view>星期:{{ weatherData.week }}</view>
			<view>最高温:{{ weatherData.high }}</view>
			<view>最低温:{{ weatherData.low }}</view>
		</view>
		<button @click="downloadNetworkImage" class="btn-mt">3.下载网络图片</button>
		<image v-if="downloadedImageUrl" :src="downloadedImageUrl" class="preview-img"></image>
		<button @click="downloadOrPlayVideo" class="btn-mt">4.下载/播放网络视频</button>
		<video v-if="videoUrl" :src="videoUrl" class="preview-video" controls></video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				weatherData: null,
				weatherURL: 'http://t.weather.sojson.com/api/weather/city/101230501',
				downloadedImageUrl: '',
				iamgeURL: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/momastery-9939590_1280.jpg',
				videoUrl: '',
				videoURL: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
			};
		},
		onLoad() {

		},
		methods: {
			chooseAndPreviewImage() {
				uni.chooseImage({
					count: 1,
					success: (chooseRes) => {
						const tempFilePath = chooseRes.tempFilePaths[0];
						this.imageUrl = tempFilePath;
						uni.previewImage({
							urls: [tempFilePath],
							current: 0
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
						console.error(err);
					}
				});
			},
			getWeather() {
				uni.request({
						url: this.weatherURL,
						method: 'GET',
						success: (res) => {
							if (res.data?.data?.forecast) {
								const tomorrowWeather = res.data.data.forecast[1];
								this.weatherData = {
									date: tomorrowWeather.date,
									week: tomorrowWeather.week,
									high: tomorrowWeather.high,
									low: tomorrowWeather.low
								};
							} else {
								uni.showToast({
									title: '数据格式异常',icon: 'none'
								});
							}
						},
						fail: (err) => {
							uni.showToast({
								title:'请求天气失败',icon:'none'
							});
							console.error(err);
						}
				});
		},
		downloadNetworkImage(){
			uni.downloadFile({
				url: this.iamgeURL,
				onProgressUpdate: (res) => {
					console.log('图片下载进度: ${res.progress}%');
					console.log('已下载: ${res.totalBytesWritten} / 总大小: ${res.totalBytesExpectedToWrite}');
				},
				success: (downloadRes) => {
					if (downloadRes.statusCode === 200){
						this.downloadedImageUrl = downloadRes.tempFilePath;
						uni.showToast({
							title:'图片下载完成',icon:'success'
						});
					}
				},
				fail: (err) => {
					uni.showToast({
						title:'图片下载失败',icon:'none'
					});
					console.error(err);
				}
			});
		},
		downloadOrPlayVideo(){
			uni.downloadFile({
				url: this.videoURL,
				onProgressUpdate: (res) => {
					console.log('视频下载进度: ${res.progress}%');
				},
				success: (downloadRes) => {
					if (downloadRes.statusCode === 200){
						this.videoURL = downloadRes.tempFilePath;
						uni.showToast({
							title:'视频可播放',icon:'success'
						});
					}
				},
				fail: (err) => {
					uni.showToast({
						title:'视频处理失败',icon:'none'
					});
					console.error(err);
				}
			});
		}
	}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>